<template>
  <div class="nianbiao">
    <el-dialog title="年表" :visible.sync="dialogTableVisible" :modal="false" width="80vw">
      <div class="demo-input-suffix">
        <el-input class="custom-input" placeholder="请输入年份/STD/RES/ARS/样本是" prefix-icon="el-icon-search"></el-input>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
        <el-button type="primary" icon="el-icon-download">下载</el-button>
        <el-button type="primary" icon="el-icon-printer">打印</el-button>

        <!-- 添加两个并列的虚线框 -->
        <div class="dashed-boxes">
          <div class="dashed-box">
            <span class="box-title">表格数据</span>
            <el-table :data="formData" height="700px" border style="width: 100%"
              :default-sort="{ prop: 'year', order: 'descending' }">
              <el-table-column prop="year" label="年份" sortable width="180"></el-table-column>
              <el-table-column prop="std" label="STD" sortable width="180"></el-table-column>
              <el-table-column prop="res" label="RES" sortable></el-table-column>
              <el-table-column prop="aes" label="AES" sortable></el-table-column>
              <el-table-column prop="sampleSize" label="样本量" sortable></el-table-column>
            </el-table>
          </div>
          <div class="dashed-box">
            <span class="box-title">统计数据</span>
            <div class="chart-container">
              <!-- 第一个图表独占一行 -->
              <div class="chart1" ref="chart1"></div>
              <!-- 后两个图表一行排列，各占一半宽度 -->
              <div class="chart-row">
                <div class="chart" ref="chart2"></div>
                <div class="chart" ref="chart3"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      dialogTableVisible: false,
      formData: [{
        year: '2016-05-03',
        std: '1.276',
        res: '2.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '4.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '8.276',
        res: '5.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '3.276',
        res: '7.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '5.276',
        res: '2.916',
        aes: '0.989',
        sampleSize: '1'
      }, {
        year: '2016-05-03',
        std: '2.276',
        res: '3.916',
        aes: '0.989',
        sampleSize: '1'
      },
      {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
      {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
      {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
      {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
      {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
      {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
      {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
      {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
      {
        year: '2016-05-03',
        std: '0.276',
        res: '4.916',
        aes: '0.989',
        sampleSize: '1'
      },
      ]
    };
  },
  methods: {
    showtimeline() {
      this.dialogTableVisible = true;
      this.$nextTick(() => {
        this.initCharts();
      });
    },
    initCharts() {
      this.initChart(this.$refs.chart1, this.chartData1);
      this.initChart(this.$refs.chart2, this.chartData2);
      this.initChart(this.$refs.chart3, this.chartData3);
    },
    initChart(chartDom, chartData) {
      if (chartDom) {
        const myChart = echarts.init(chartDom);
        const option = {
          xAxis: {
            type: 'category',
            data: chartData.xAxisData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: chartData.seriesData,
              type: 'line'
            }
          ]
        };
        myChart.setOption(option);
      }
    },
  },
  mounted() {
      // this.showtimeline();
  },
  computed: {
    chartData1() {
      return {
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [150, 230, 224, 218, 135, 147, 260]
      };
    },
    chartData2() {
      return {
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [300, 200, 250, 230, 210, 165, 120]
      };
    },
    chartData3() {
      return {
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [220, 180, 240, 250, 300, 210, 170]
      };
    }
  }
}
</script>

<style scoped>
.custom-input {
  width: 40%;
  margin-right: 10px;
}

.dashed-boxes {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.dashed-box {
  width: 48%;
  border: 1px dashed #ccc;
  padding: 10px;
  position: relative;
}

.box-title {
  position: absolute;
  top: -12px;
  left: 10px;
  background-color: white;
  padding: 0 5px;
  font-size: 14px;
  color: #333;
}

.chart-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.chart-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.chart1{
  width: 100%;
  height: 300px;
  background: #ccc4c4;
}
.chart {
  width: 48%; /* 两个图表平分宽度 */
  height: 400px; /* 设置固定高度 */
  background: #ccc4c4;
}

/deep/ .el-dialog__header {
  height: 27px;
  background-color: rgb(7, 46, 82) !important;
}

/deep/ .el-dialog__title {
  color: white !important;
  font-size: 24px;
}

/deep/ .el-dialog__close {
  font-size: 24px !important;
}
</style>